<script lang="ts" setup>
import { useAdminRecycleOrderStore } from "../store/adminRecycleOrder"
import { SearchIcon } from "tdesign-icons-vue-next"
import DeleteDialog from "./DeleteDialog.vue"
import RestoreDialog from "./RestoreDialog.vue"
import { columns } from "../attribute/columns"

const store = useAdminRecycleOrderStore()
</script>

<template>
  <t-row class="container">
    <t-card style="width: 100%">
      <t-space>
        <t-input v-model="store.table.searchData" placeholder="[订单号]" size="small"
                 @enter="store.table.search">
          <template #suffixIcon>
            <search-icon />
          </template>
        </t-input>
        <t-button size="small" theme="primary" @click="store.table.search">
          搜索
        </t-button>
        <t-button size="small" theme="primary" variant="outline" @click="store.deleteDialog.isGroupEmpty">
          删除
        </t-button>
        <t-button size="small" theme="primary" variant="outline" @click="store.table.refresh">
          刷新
        </t-button>
      </t-space>
      <t-divider />
      <t-table
        :key="store.table.key"
        :columns="columns"
        :data="store.table.data"
        :loading="store.table.loading"
        :pagination="{ defaultCurrent: 1, defaultPageSize: 5, total: store.table.data.length }"
        :selected-row-keys="store.deleteDialog.ids"
        cellEmptyContent="—"
        empty="暂无数据"
        hover
        row-key="id"
        stripe
        table-layout="fixed"
        @select-change="store.deleteDialog.idsChange"
      >
        <template #status="{row}">
          <t-button :theme="row.status === 1? 'success': 'danger'" size="small" variant="text">{{row.status === 1 ? "已支付": "未支付" }}</t-button>
        </template>

        <template #type="{row}">
          <t-button :theme="row.type === 1? 'success': 'primary'" size="small" variant="text">{{row.type === 1 ? "微信": "支付宝" }}</t-button>
        </template>
        <template #operate="{row}">
          <t-button class="item" size="small" variant="outline" @click="store.restoreDialog.restore(row.id)">恢复</t-button>
          <t-button class="item" size="small" variant="outline" @click="store.deleteDialog.delete(row.id)">删除</t-button>
        </template>
      </t-table>
    </t-card>
  </t-row>
  <DeleteDialog />
  <RestoreDialog />
</template>

<style lang="less" scoped>
@border-color: var(--td-component-border);
.container {
  border: @border-color 1px solid;
  padding: 10px;
  margin: 10px 0;
}

.item {
  margin: 0 5px;
}
</style>
